<template>
	<view class="history_layout">
		<z-paging ref="paging" v-model="list" @query="queryList" show-refresher-when-reload>
			<view v-for="(item,index) in list" :key="item._id" class="history_container"
				@click="history_item_click(item)">
				<view class="history_container_item">
					<view class="history_type">
						类型：{{item.storehouse.type == 0 ? '模拟考试' : '历年真题'}}
					</view>
					<view class="history_title">
						课题：{{item.storehouse.title}}
					</view>
					<view class="history_create_date">
						练习时间：{{dayjs(item.create_date).format('YYYY-MM-DD')}}，共{{item.topics.length}}题，做对{{correct_count(item.topics)}}题
					</view>
				</view>

			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		computed,
		nextTick,
		ref
	} from 'vue'

	import dayjs from 'dayjs'

	const paging = ref(null)
	const list = ref([])
	const topic_exams = uniCloud.importObject('topic-exams')

	function correct_count(topics) {
		return topics.filter(item => item.is_correct).length
	}

	const queryList = async (pageNo, pageSize) => {
		let res = await topic_exams.exam_list(pageNo, pageSize)
		console.log("历史", res);
		if (res.errCode != 0) {
			paging.value.complete(false)
			return
		}
		paging.value.complete(res.data)
	}

	function history_item_click(params) {
		uni.navigateTo({
			url: '/pages_lianxi/linianzhenti/topic_practice_result?id=' + params._id
		})
	}
</script>

<style lang="scss" scoped>
	.history_layout {
		.history_container {
			margin-top: 10rpx;

			.history_container_item {
				margin: 0rpx 20rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				background-color: $me-color-background;

				.history_type {
					color: $me-color-gray-3;
					font-size: 24rpx;
				}

				.history_title {
					margin-top: 10rpx;
					font-size: 30rpx;
				}

				.history_create_date {
					margin-top: 10rpx;
					font-size: 26rpx;
					color: $me-color-gray-2;
				}
			}
		}
	}
</style>